<!-- 商品类别占比 -->
<template>
  <div class="categoryProportion">
    <div class="categoryProportion_content">
      <div class="categoryProportion_content_left">
        <div class="categoryProportion_content_pieChart" @click="toMaterialStatistics">
          <pieChart id="companyMaterials" ref="companyMaterials" height="100%"></pieChart>
        </div>
        <div class="categoryProportion_content_pieChart">
          <pieChart id="projectMaterials" ref="projectMaterials" height="100%"></pieChart>
        </div>
        <div class="categoryProportion_content_pieChart">
          <pieChart id="individualMaterials" ref="individualMaterials" height="100%"></pieChart>
        </div>
      </div>
      <div class="categoryProportion_content_right">
        <div class="categoryProportion_content_right_top">
          <el-radio-group v-model="radio" @change="changeType">
            <el-radio-button label="数量"></el-radio-button>
            <el-radio-button label="金额"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="categoryProportion_content_right_bottom">
          <div class="chart">
            <pieChart id="sortMaterials1" ref="sortMaterials1" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData1" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials2" ref="sortMaterials2" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData2" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials3" ref="sortMaterials3" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData3" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials4" ref="sortMaterials4" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData4" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials5" ref="sortMaterials5" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData5" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials6" ref="sortMaterials6" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData6" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials7" ref="sortMaterials7" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData7" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
          <div class="chart">
            <pieChart id="sortMaterials8" ref="sortMaterials8" height="36%"></pieChart>
            <tableBox class="tb" :data="tableData8" :show-serial-number="true" :showThead="true"
              :thead-list="tableThead">
            </tableBox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getLevelStockCommodityTypeRate, getLevelCommodityTypeRateByCommodityTypeId, getLevelCommodityTypeTableByCommodityTypeId } from "@/api/bi/assetsAndMaterials";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      time: null,
      radio: '数量',
      typeArr: [
        { text: '清洁工具', id: 21 },
        { text: '清洁药剂', id: 22 },
        { text: '垃圾处置', id: 23 },
        { text: '承载收纳', id: 25 },
        { text: '机械配件', id: 36 },
        { text: '客用品', id: 28 },
        { text: '劳保用品', id: 27 },
        { text: '其他', id: 37 },
      ],
      tableThead: ['', '名称', '库存'],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getMaterialsRate()
    this.getMaterialsTypeRate(1)
    this.getTopTableData(1)
  },
  methods: {
    changeType(val) {
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (val == '金额') {
        this.tableThead = ['', '名称', '金额']
        this.getMaterialsTypeRate(2)
        this.getTopTableData(2)
      } else {
        this.tableThead = ['', '名称', '库存']
        this.getMaterialsTypeRate(1)
        this.getTopTableData(1)
      }
    },
    // 获取物资占比图
    async getMaterialsRate() {
      const { data: res1 } = await getLevelStockCommodityTypeRate({ wareType: 0 });
      const { data: res2 } = await getLevelStockCommodityTypeRate({ wareType: 1 });
      const { data: res3 } = await getLevelStockCommodityTypeRate({ wareType: 2 });
      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }

      let title = {
        text: '（公司）物资品种库存占比图',
        left: 'center'
      }

      let chartData1 = []
      res1.forEach(item => {
        chartData1.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      this.$refs.companyMaterials.initChart(chartData1, legend, title, '60%')

      let chartData2 = []
      title.text = '（项目）物资品种库存占比图'
      res2.forEach(item => {
        chartData2.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      this.$refs.projectMaterials.initChart(chartData2, legend, title, '60%')

      let chartData3 = []
      title.text = '（个人）物资品种库存占比图'
      res3.forEach(item => {
        chartData3.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      this.$refs.individualMaterials.initChart(chartData3, legend, title, '60%')
    },

    // 获取物资类别占比图 
    async getMaterialsTypeRate(paramType) {
      let typeArr = this.typeArr
      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }
      const { data: res1 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getLevelCommodityTypeRateByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });
      let chartData1 = [], chartData2 = [], chartData3 = [], chartData4 = [], chartData5 = [], chartData6 = [], chartData7 = [], chartData8 = []

      chartData1 = [{ name: '公司', value: res1.stockCommodityTypeRate }, { name: '项目', value: res1.projectCommodityTypeRate }, { name: '个人', value: res1.peopleCommodityTypeRate }]
      chartData2 = [{ name: '公司', value: res2.stockCommodityTypeRate }, { name: '项目', value: res2.projectCommodityTypeRate }, { name: '个人', value: res2.peopleCommodityTypeRate }]
      chartData3 = [{ name: '公司', value: res3.stockCommodityTypeRate }, { name: '项目', value: res3.projectCommodityTypeRate }, { name: '个人', value: res3.peopleCommodityTypeRate }]
      chartData4 = [{ name: '公司', value: res4.stockCommodityTypeRate }, { name: '项目', value: res4.projectCommodityTypeRate }, { name: '个人', value: res4.peopleCommodityTypeRate }]
      chartData5 = [{ name: '公司', value: res5.stockCommodityTypeRate }, { name: '项目', value: res5.projectCommodityTypeRate }, { name: '个人', value: res5.peopleCommodityTypeRate }]
      chartData6 = [{ name: '公司', value: res6.stockCommodityTypeRate }, { name: '项目', value: res6.projectCommodityTypeRate }, { name: '个人', value: res6.peopleCommodityTypeRate }]
      chartData7 = [{ name: '公司', value: res7.stockCommodityTypeRate }, { name: '项目', value: res7.projectCommodityTypeRate }, { name: '个人', value: res7.peopleCommodityTypeRate }]
      chartData8 = [{ name: '公司', value: res8.stockCommodityTypeRate }, { name: '项目', value: res8.projectCommodityTypeRate }, { name: '个人', value: res8.peopleCommodityTypeRate }]

      let titleArr = []
      typeArr.forEach(item => {
        titleArr.push({
          text: item.text,
          left: 'center',
          top: '45%'
        })
      })
      let radius = ['50%', '90%']
      let label = { show: false }
      let itemStyle = {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      }
      this.$refs.sortMaterials1.initChart(chartData1, legend, titleArr[0], radius, label, itemStyle)
      this.$refs.sortMaterials2.initChart(chartData2, legend, titleArr[1], radius, label, itemStyle)
      this.$refs.sortMaterials3.initChart(chartData3, legend, titleArr[2], radius, label, itemStyle)
      this.$refs.sortMaterials4.initChart(chartData4, legend, titleArr[3], radius, label, itemStyle)
      this.$refs.sortMaterials5.initChart(chartData5, legend, titleArr[4], radius, label, itemStyle)
      this.$refs.sortMaterials6.initChart(chartData6, legend, titleArr[5], radius, label, itemStyle)
      this.$refs.sortMaterials7.initChart(chartData7, legend, titleArr[6], radius, label, itemStyle)
      this.$refs.sortMaterials8.initChart(chartData8, legend, titleArr[7], radius, label, itemStyle)

      this.load.close()


    },
    //  获取物资 top 
    async getTopTableData(paramType) {
      let typeArr = this.typeArr

      const { data: res1 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[0].id, paramType });
      const { data: res2 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[1].id, paramType });
      const { data: res3 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[2].id, paramType });
      const { data: res4 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[3].id, paramType });
      const { data: res5 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[4].id, paramType });
      const { data: res6 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[5].id, paramType });
      const { data: res7 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[6].id, paramType });
      const { data: res8 } = await getLevelCommodityTypeTableByCommodityTypeId({ commodityTypeId: typeArr[7].id, paramType });

      this.tableData1 = this.formatTableData(res1)
      this.tableData2 = this.formatTableData(res2)
      this.tableData3 = this.formatTableData(res3)
      this.tableData4 = this.formatTableData(res4)
      this.tableData5 = this.formatTableData(res5)
      this.tableData6 = this.formatTableData(res6)
      this.tableData7 = this.formatTableData(res7)
      this.tableData8 = this.formatTableData(res8)

    },
    formatTableData(data) {
      let arr = []
      data.forEach(item => {
        arr.push([{ val: item.commodityTypeName }, { val: this.radio == '数量' ? item.commodityNumber : item.commodityMoney }])
      })
      return arr
    },
    toMaterialStatistics() {
      this.$router.push("/cloudManage/supplies/materialStatistics");
    }
  }

}
</script>
<style lang="scss" scoped>
.categoryProportion {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  // overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .categoryProportion_content {
    flex-grow: 1;
    height: 100%;
    // padding: 16px 22px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    .categoryProportion_content_left {
      width: 22%;
      background-color: rgba(255, 255, 255, 0.6);
      display: flex;
      border-radius: 6px;
      padding: 22px;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .categoryProportion_content_pieChart {
        height: 32%;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
      }
    }

    .categoryProportion_content_right {
      width: 77%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .categoryProportion_content_right_top {
        flex-shrink: 0;
      }

      .categoryProportion_content_right_bottom {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        justify-content: space-between;
        align-content: space-around;
        height: 100%;

        .chart {
          width: 24%;
          height: 47%;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;

          >.tb {
            width: 90%;

            td {
              font-size: 14px !important;
            }

          }
        }

      }
    }

  }
}
</style>
